<template>
	<view>
		<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
		<view class="header"></view>
		<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="'height:' + scrollH + 'px;'">
			<view style="width: 100%;height: 120upx;"></view>
			<view class="d-flex flex-column">
				<!-- 加载中 -->
				<template>
					<view v-show="isShowLoading" class="" :style="'height:' + scrollH + 'px;background-color: #f5f5f5;'">
						<view class="d-flex a-center j-center" style="height: 600upx;">
							<image src="../../static/images/loading1.gif" style="height: 75upx;width: 75upx;"></image>
						</view>
					</view>
				</template>
				<view v-show="!isShowLoading" v-for="(item, idx) in mainContentList" :key="idx">
					<!-- 轮播图组件 -->
					<template v-if="item.module === 'sylbt' && item.list.length > 0">
						<swiper-custom :dataList="item.list"></swiper-custom>
					</template>
					<!-- 方格组件 -->
					<template v-if="item.type === 'SQUARE'">
						<square-list></square-list>
					</template>
					<sun-divider v-if="item.type === 'SQUARE'"></sun-divider>
					<!-- 横向房价滚动栏 -->
					<template v-if="item.module === 'lpxq' && item.list.length > 0">
						<house-slide :dataList="item.list"></house-slide>
					</template>
					<!-- 新闻推荐位 -->
					<template v-if="item.module === 'xwtjw' && item.list.length > 0">
						<news-list-module :newsList="item.list"></news-list-module>
					</template>
					<!-- PDF下载 -->
					<template v-if="item.module === 'pdf'">
						<load-module></load-module>
					</template>
					<!-- 推荐位 -->
					<template v-if="item.module === 'tjw' && item.list.length > 0">
						<!-- 专题 -->
						<subject-module v-if="item.list[0].type === 'SPECIAL'" :content="item.list[0]"></subject-module>
						<!-- 广告 -->
						<poster-module v-if="item.list[0].type === 'ADVERTISEMENT'"></poster-module>
					</template>
					<!-- 新闻视频 -->
					<template v-if="item.moduleType === 'xwsp' && item.list.length > 0">
						<video-item :item="item.list[0]"></video-item>
					</template>
					<!-- 轮播广告 -->
					<template v-if="item.moduleType === 'gg' && item.list.length > 0">
						<swiper-adver :dataList="item.list"></swiper-adver>
					</template>
					<!-- 专题 -->
					<template v-if="item.moduleType === 'zt' && item.list.length > 0">
						<subject-module :content="item.list[0]"></subject-module>
					</template>
					<!-- 一般栏目 -->
					<sun-divider v-if="item.moduleType === 'channel' && item.list.length > 0"></sun-divider>
					<template v-if="item.moduleType === 'channel' && item.list.length > 0">
						<column-block :dataObj="item"></column-block>
					</template>
					<!-- 问吧栏目 -->
					<sun-divider v-if="item.moduleType === 'wb' && item.list.length > 0"></sun-divider>
					<template v-if="item.moduleType === 'wb' && item.list.length > 0">
						<question-block :dataObj="item.list[0]"></question-block>
					</template>
					<!-- 专家评楼 -->
					<sun-divider v-if="item.moduleType === 'zjpl'"></sun-divider>
					<template v-if="item.moduleType === 'zjpl'">
						<export-block :dataObj="item"></export-block>
					</template>
					<!-- 以下为无限下拉板式 -->
					<template v-if="item.type === 'BAR'">
						<question-block :dataObj="item"></question-block>
					</template>
					<template v-if="item.type === 'SMALL_IMAGE_CONTENT'">
						<news-item :isSingle="true" :item="item"></news-item>
					</template>
					<template v-if="item.type === 'BIG_IMAGE_CONTENT'">
						<news-item-big :isSingle="true" :item="item"></news-item-big>
					</template>
					<template v-if="item.type === 'SMALL_IMAGE_POSITION'">
						<news-item :isSingle="true" :item="item" :isRecommend="true"></news-item>
					</template>
					<template v-if="item.type === 'BIG_IMAGE_POSITION'">
						<news-item-big :isSingle="true" :item="item" :isRecommend="true"></news-item-big>
					</template>
					<template v-if="item.type === 'VIDEO'">
						<video-item :item="item"></video-item>
					</template>
					<template v-if="item.type === 'ADVERTISEMENT'">
						<poster-module :item="item"></poster-module>
					</template>
					<template v-if="item.type === 'SPECIAL'">
						<subject-module :content="item"></subject-module>
					</template>
				</view>
				<sun-divider></sun-divider>
				<!-- 加载更多 -->
				<view class="d-flex a-center j-center font-md py-2">{{ currentLoadText }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import squareList from '@/components/common/square-list.vue';
import newsItem from '@/components/module/news-item.vue';
import newsItemBig from '@/components/module/news-item-big.vue';
import swiperCustom from '@/components/common/swiper-custom.vue';
import sunDivider from '@/components/common/sun-divider.vue';
import cardItem from '@/components/module/card-item.vue';
import newsListModule from '@/components/module/news-list-module.vue';
import posterModule from '@/components/module/poster-module.vue';
import subjectModule from '@/components/module/subject-module.vue';
import videoItem from '@/components/module/video-item.vue';
import loadModule from '@/components/module/load-module.vue';
import swiperAdver from '@/components/common/swiper-adver.vue';
import columnBlock from './templates/column-block.vue';
import houseSlide from '@/components/module/house-slide.vue';
import questionBlock from './templates/question-block.vue';
import exportBlock from './templates/export-block.vue';
import api from '@/common/lib/request.js';
export default {
	data() {
		return {
			scrollH: 600,
			mainContentList: [],
			currentPageNo: 1,
			isShowLoading: false,
			currentSite: 1,
			currentLoadText: '上拉加载更多',
			loadStatus: ['上拉加载更多', '加载中', '没有更多了']
		};
	},
	components: {
		squareList,
		newsItem,
		newsItemBig,
		swiperCustom,
		sunDivider,
		cardItem,
		newsListModule,
		posterModule,
		subjectModule,
		loadModule,
		videoItem,
		swiperAdver,
		columnBlock,
		houseSlide,
		questionBlock,
		exportBlock
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.scrollH = res.windowHeight;
			}
		});
		this.__initWarehouseSource(1)
		this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
	},
	methods: {
		__initWarehouseSource(pageNo){
			const _this = this;
			if (pageNo === 1) {
				this.isShowLoading = true;
			}
			api.request({
				url: '/channel/zfzk/contents',
				data: {
					page: pageNo,
					siteId: this.currentSite
				}
			})
				.then(response => {
					console.log(response);
					if (response.length > 0) {
						if(pageNo == 1){
							let slideList = response.filter(item => {
								return item.type === 'SLIDESHOW'
							})
							let slideArr = [{
								module: "sylbt",
								title: "首页轮播图",
								moduleType: "sylbt",
								list: slideList
							}]
							let squareObj = [{ type: "SQUARE"}]
							let noslideList = response.filter(item => {
								return item.type != 'SLIDESHOW'
							})
							_this.mainContentList = [..._this.mainContentList, ...slideArr,...squareObj,...noslideList];
						}else{
							_this.mainContentList = [..._this.mainContentList, ...response];
						}
						_this.currentPageNo++;
						_this.currentLoadText = _this.loadStatus[0];
						_this.isShowLoading = false;
					} else {
						_this.currentLoadText = _this.loadStatus[2];
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		loadMore() {
			if (this.currentLoadText !== '上拉加载更多') {
				return;
			}
			this.currentLoadText = this.loadStatus[1];
			this.__initWarehouseSource(this.currentPageNo);
		}
	}
};
</script>

<style>
	.header{
			position: fixed;
			z-index: 9999;
			width: 100%;
			top: 0;
			left: 0;
			height: 80upx;
			background-color: #005bac;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			font-size: 37upx;
			margin-top: var(--status-bar-height);
			/* background-image: url('http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/02134241gb38.jpg'); */
			background-image: url('http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/03142158m0jf.jpg');
			/* box-shadow: 5upx 5upx 5upx #f5f5f5; */
			background-size:100%;
	}
	.stat{
			background-color: #fff;
			position: fixed;
			z-index: 9999;
			height: var(--status-bar-height);
			width: 100%;
			top: 0;
			left: 0;
		}
</style>
